<template>
	<div class="login_page_class">
		<div class="title">
			<img src="@/assets/logo.png" class="title_logo_img" />
			<h1>打单宝</h1>
		</div>
		<div class="title_desc">订单处理专家</div>
		<el-card class="box-card" style="width: 368px; margin: 0 auto">
			<el-form :model="loginForm" :rules="rules" ref="loginForm" style="margin-top: 30px">
				<el-form-item prop="username">
					<el-input
						style="font-size: 16px; padding-left: 6px"
						prefix-icon="el-icon-user"
						v-model="loginForm.username"
						placeholder="用户名"
					>
					</el-input>
				</el-form-item>

				<el-form-item prop="password">
					<el-input
						prefix-icon="el-icon-lock"
						style="font-size: 16px; padding-left: 6px"
						v-model="loginForm.password"
						@keyup.enter.native="submitForm"
						placeholder="密码"
						show-password
					>
					</el-input>
				</el-form-item>

				<el-form-item style="margin-top: 24px">
					<el-button
						type="primary"
						style="width: 100%; font-size: 16px"
						@click="submitForm('loginForm')"
						v-on:keyup.enter="submitForm('loginForm')"
						class="submit_btn"
						>登录
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'Home',
	data() {
		return {
			loginForm: {
				username: 'mabangtest',
				password: 'mabang3.0',
			},
			rules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
			},
		}
	},
	components: {},
	methods: {
		submitForm() {
			this.$store.dispatch('loginSen', Object.assign({}, this.loginForm)).then(() => {
				this.$router.push('/dashboard')
			})
		},
	},
}
</script>
<style scoped>
.login_page_class {
	width: 100%;
	height: 100%;
	background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
	background-size: 100% 100%;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	transition: background 0.3s;
}

.title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 32px;
	height: 44px;
}

.title h1 {
	font-size: 33px;
}

.title .title_logo_img {
	margin-right: 18px;
	height: 44px;
}

.title_desc {
	margin-top: 12px;
	margin-bottom: 20px;
	color: rgba(0, 0, 0, 0.45);
	text-align: center;
	font-size: 14px;
}
</style>
